<template>
  <div class="node-style-main" v-if="selectedNode">
    <el-collapse expand-icon-position="left" v-model="activeNames">
      <el-collapse-item title="形状" name="1">
        <div class="node-style-item">
          <span>填充颜色</span>
          <el-color-picker v-model="nodeStyle.bgColor" />
        </div>
        <div class="node-style-item">
          <span>边框</span>
          <div class="node-style-item-right">
            <!-- <el-select v-model="nodeStyle.borderWeight" placeholder="Select" style="width: 60px">
              <el-option v-for="item in borderWeightOpt" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <!-- 虚线实线 -->
            <!-- <el-popover trigger="click" placement="bottom" :width="200">
            <template #reference>
              <el-button>
                <div class="item-box" :style="{ border: `1px solid ${nodeStyle.borderColor}` }"></div>
              </el-button>
            </template>
<div class="item-box-main">
  <div class="item-box" :style="{ border: `1px solid ${nodeStyle.borderColor}` }"></div>
  <div class="item-box" :style="{ border: `1px dashed ${nodeStyle.borderColor}` }"></div>
</div>
</el-popover> -->
            <el-color-picker v-model="nodeStyle.borderColor" />
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="文本" name="2">
        <div class="node-style-item">
          <el-select v-model="nodeStyle.fontSize" filterable allow-create default-first-option :reserve-keyword="false"
            style="width: 80px">
            <el-option v-for="item in fontSizeOpt" :key="item" :label="item" :value="item" />
          </el-select>
          <el-select v-model="nodeStyle.fontWeight" placeholder="Select" style="width: 80px">
            <el-option v-for="item in fontWeightOpt" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-color-picker v-model="nodeStyle.fontColor" />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <el-empty description="请选择要修改的节点" v-else />
</template>

<script setup lang="ts">
import { ref, watch, computed, PropType } from 'vue'
import type {NodeDefaultStyle} from '../../type'
const props = defineProps({
  modelValue: {
    type: Object as PropType<NodeDefaultStyle | null>,
    default: () => null
  },
  selectedNode: {
    type: Object as PropType<any>,
    default: null
  }
})

const nodeDefaultStyle = {
  bgColor: '#ffffff00',
  borderColor: '#ffffff00',
  borderWeight: 2,
  fontColor: '#ffffff00',
  fontWeight: 400,
  fontSize: 16,
}


const borderWeightOpt = [
  { label: '细', value: 1 },
  { label: '中等', value: 2 },
  { label: '粗', value: 5 },
  { label: '极粗', value: 8 },
]
const fontWeightOpt = [
  { label: '默认', value: 400 },
  { label: '粗', value: 500 },
  { label: '较粗', value: 600 },
  { label: '极粗', value: 800 },
]
const fontSizeOpt = [14, 16, 18, 20, 28, 30]

const activeNames = ref(['1', '2'])

const emits = defineEmits(['update:modelValue'])

// 实现v-model双向绑定
const nodeStyle = computed({
  get: () => {
    if (!props.modelValue) {
      return nodeDefaultStyle
    } else {
      return props.modelValue
    }
  },
  set: (val) => {
    emits('update:modelValue', val)
  }
})

</script>

<style scoped lang='scss'>
.node-style-main {
  :deep(.el-collapse-item__header){
    box-sizing: border-box;
    padding: 8px;
  }
  .node-style-item {
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    :deep(.el-color-picker) {
      width: 80px;
    }

    :deep(.el-color-picker__trigger) {
      width: 80px;
      height: 30px;
      border: none;
      padding: 0;
    }

    .item-box-main {
      width: 120px !important;
      height: 200px !important;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .item-box {
      width: 50px !important;
      height: 20px !important;
      border-radius: 8px;
    }

    .node-style-item-right {
      gap: 10px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
</style>